<template>
  <div class="delete-test-container">
    <el-card class="test-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">
            <el-icon><Search /></el-icon>
            删除功能测试
          </span>
        </div>
      </template>

      <!-- 单个用户删除测试 -->
      <div class="test-section">
        <h3>单个用户删除测试</h3>
        <el-input v-model="singleUserId" placeholder="请输入用户ID" style="width: 300px; margin-right: 10px;"></el-input>
        <el-button type="danger" @click="testSingleDelete">测试删除</el-button>
      </div>

      <!-- 批量用户删除测试 -->
      <div class="test-section">
        <h3>批量用户删除测试</h3>
        <el-input v-model="batchUserIds" placeholder="请输入用户ID列表，用逗号分隔" style="width: 500px; margin-right: 10px;"></el-input>
        <el-button type="danger" @click="testBatchDelete">测试批量删除</el-button>
      </div>

      <!-- 日志输出 -->
      <div class="log-section">
        <h3>API响应日志</h3>
        <el-scrollbar max-height="400px" class="log-scrollbar">
          <div v-for="(log, index) in logs" :key="index" :class="['log-item', log.type]">
            <span class="log-time">{{ log.time }}</span>
            <span class="log-content">{{ log.content }}</span>
            <pre v-if="log.details" class="log-details">{{ JSON.stringify(log.details, null, 2) }}</pre>
          </div>
        </el-scrollbar>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// 测试数据
const singleUserId = ref('')
const batchUserIds = ref('')
const logs = ref([])

// 添加日志
const addLog = (content, type = 'info', details = null) => {
  const now = new Date()
  const time = now.toLocaleString('zh-CN')
  logs.value.unshift({ time, content, type, details })
}

// 测试单个用户删除
const testSingleDelete = async () => {
  if (!singleUserId.value) {
    ElMessage.warning('请输入用户ID')
    return
  }

  try {
    addLog(`开始测试单个用户删除，用户ID: ${singleUserId.value}`, 'info')
    const token = localStorage.getItem('token')
    const response = await axios.delete(`http://localhost:8080/api/user/${singleUserId.value}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })
    addLog('单个用户删除成功', 'success', response.data)
    ElMessage.success('删除成功')
  } catch (error) {
    addLog('单个用户删除失败', 'error', error.response?.data || error.message)
    ElMessage.error('删除失败')
  }
}

// 测试批量用户删除 - 使用标准axios.delete方法
const testBatchDelete = async () => {
  if (!batchUserIds.value) {
    ElMessage.warning('请输入用户ID列表')
    return
  }

  try {
    const userIds = batchUserIds.value.split(',').map(id => Number(id.trim())).filter(id => !isNaN(id))
    if (userIds.length === 0) {
      ElMessage.warning('请输入有效的用户ID列表')
      return
    }

    addLog(`开始测试批量用户删除，用户IDs: ${userIds.join(', ')}`, 'info')
    const token = localStorage.getItem('token')
    
    // 修复方法1：使用标准的DELETE请求，但通过data参数传递数据
    const response = await axios.delete('http://localhost:8080/api/user/batch', {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
      },
      data: { userIds } // 注意这里是data参数，不是params
    })
    
    addLog(`批量用户删除成功，共删除 ${userIds.length} 个用户`, 'success', response.data)
    ElMessage.success('批量删除成功')
  } catch (error) {
    addLog('批量用户删除失败', 'error', error.response?.data || error.message)
    ElMessage.error('批量删除失败')
  }
}
</script>

<style scoped>
.delete-test-container {
  padding: 20px;
}

.test-card {
  min-height: calc(100vh - 120px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #E6A23C;
}

.test-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

.test-section h3 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
}

.log-section {
  margin-top: 30px;
}

.log-section h3 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
}

.log-scrollbar {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background: #fff;
}

.log-item {
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.log-item:last-child {
  border-bottom: none;
}

.log-item.info {
  background: #f5f7fa;
}

.log-item.success {
  background: #f0f9ff;
  color: #67c23a;
}

.log-item.error {
  background: #fef0f0;
  color: #f56c6c;
}

.log-time {
  font-size: 12px;
  color: #909399;
  margin-right: 10px;
}

.log-content {
  font-size: 14px;
}

.log-details {
  margin: 10px 0 0 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
  max-height: 200px;
  overflow-y: auto;
}
</style>